<template>
	<view class="bg">
		<view class="task_one" v-for="(item, index) in dataArr" :key="index" @tap="openDetail(item,1)">
			<view class="task_head">
				<view class="headFont">{{ item.itemCode_dictText }}</view>
				<view class="task_type1">征地拆迁</view>
			</view>
			<view class="task_line">
				<view class="line_left">地块名称</view>
				<view class="line_right">{{ item.relocateCode_dictText }}</view>
			</view>
			<view class="task_line">
				<view class="line_left">乡镇</view>
				<view class="line_right">{{ item.township_dictText }}</view>
			</view>
			<view class="task_line">
				<view class="line_left">状态</view>
				<view class="line_right" v-if="item.relocateStatus === '0'">未开始</view>
				<view class="line_right" v-if="item.relocateStatus === '1'">超前</view>
				<view class="line_right" v-if="item.relocateStatus === '2'">正常</view>
				<view class="line_right" v-if="item.relocateStatus === '3'">滞后</view>
				<view class="line_right" v-if="item.relocateStatus === '4'">完成</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText"></u-loadmore>
	</view>
</template>

<script>
	import {
		homeZdcqList
	} from "@/request/zdxm.js"
	export default {
		data() {
			return {
				nowPage: 1,
				status: 'loadmore',
				dataArr: [],
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			}
		},
		onLoad() {
			this.homeZdcqList()
		},
		onReachBottom() {
			this.status = 'loading';
			this.nowPage++
			this.homeZdcqList()
		},
		methods: {
			homeZdcqList() {
				homeZdcqList({
					pageNo: this.nowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.dataArr = [...this.dataArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.status = 'nomore'
					}
					// console.log('征地拆迁',this.dataArr)
				})
			},
			openDetail(x, type) {
				uni.navigateTo({
					url: './details?item=' + JSON.stringify(x)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;
	}
	
	.task_head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 40rpx;
	
		.headFont {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}
	
		.task_type1 {
			min-width: 150rpx;
			margin-left: 10rpx;
			text-align: center;
			background: rgba(250, 173, 51, 0.1);
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #faad33;
			padding: 8rpx 16rpx;
		}
	
		.task_type2 {
			min-width: 150rpx;
			text-align: center;
			margin-left: 10rpx;
			background: rgba(48, 116, 255, 0.1);
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(48, 116, 255, 1);
			padding: 8rpx 16rpx;
		}
	
		.task_type3 {
			min-width: 150rpx;
			text-align: center;
			margin-left: 10rpx;
			background: rgba(31, 211, 183, 0.1);
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(31, 211, 183, 1);
			padding: 8rpx 16rpx;
		}
	}
	
	.task_line {
		display: flex;
		align-items: center;
		margin-bottom: 35rpx;
	
		.line_left {
			min-width: 20%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}
	
		.line_left32 {
			min-width: 32%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}
	
		.line_right {
			max-width: 80%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #272b32;
		}
	}
	
	.type_flex {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	
		.type_one {
			width: 30%;
			margin: 0 1.5%;
			height: 60rpx;
			background: #3074ff;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 30rpx;
		}
	
		.type_two {
			background: #ffffff;
			border: 1rpx solid #e7e9f0;
			border-radius: 30rpx;
			width: 30%;
			margin: 0 1.5%;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(142, 156, 179, 1);
			margin-bottom: 30rpx;
		}
	}
</style>
